import React, { Component } from "react";
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/bar";

import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/chart/pie"; //折线图是line,饼图改为pie,柱形图改为bar
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
//引入图例
import "echarts/lib/component/legend";
import "echarts/lib/component/legendScroll"; //Scroll需单独引入

//引入直角坐标系
import "echarts/lib/component/grid";

export default class BaoTable extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "一周统计"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["资讯", "图片", "说说", "管理员登陆记录"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "资讯",
          type: "line",
          stack: "总量",
          data: [5, 3, 6, 8, 3, 2, 4]
        },
        {
          name: "图片",
          type: "line",
          stack: "总量",
          data: [2, 4, 6, 5, 6, 7, 8]
        },
        {
          name: "说说",
          type: "line",
          stack: "总量",
          data: [3, 5, 8, 2, 4, 9, 10]
        },
        {
          name: "管理员登陆记录",
          type: "line",
          stack: "总量",
          data: [5, 6, 8, 7, 9, 10, 1]
        }
      ]
    });
    let option = {
      title: {
        text: "同名数量统计",
        subtext: "纯属虚构",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        right: 10,
        top: 20,
        bottom: 20,
        // data: data.legendData,
        data: ["PHP", "JavaScript", "MySQL", "JQuery", "CSS", "MUI"]
        // selected: data.selected
      },
      series: [
        {
          name: "姓名",
          type: "pie",
          radius: "55%",
          center: ["40%", "50%"],
          // data: data.seriesData,
          data: [
            { name: "PHP", value: 19 },
            { name: "JavaScript", value: 5 },
            { name: "MySQL", value: 6 },
            { name: "JQuery", value: 10 },
            { name: "CSS", value: 8 },
            { name: "MUI", value: 2 }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    var myChart1 = echarts.init(document.getElementById("main1"));
    myChart1.setOption(option);
    var myChart2 = echarts.init(document.getElementById("main2"));
    myChart2.setOption({
      title: { text: "ECharts 入门示例" },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
          itemStyle: {
            normal: {
              label: {
                formatter: "{b}\n{c}",
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "black",
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    });
  }

  render() {
    return (
      <div style={{ display: "flex" }}>
        <div id="main" style={{ width: 400, height: 400 }}></div>
        <div id="main1" style={{ width: 400, height: 400 }}></div>
        <div id="main2" style={{ width: 400, height: 400 }}></div>
      </div>
    );
  }
}
